<template>
  <el-dialog :title="title" append-to-body :destroy-on-close="true" :visible.sync="visible" :width="'560px'">
    <el-form :model="rateForm" ref="rateForm" :rules="rules" label-width="100px" size="small" :disabled="isLookMode">
      <el-row :gutter="10">
        <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
          <el-form-item label="分类名称" prop="title">
            <el-input size="small" v-model.trim="rateForm.title" placeholder="请输入分类名称" maxlength="30" show-word-limit ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
          <el-form-item label="分类编码" prop="taxNumber">
            <el-input size="small" v-model.trim="rateForm.taxNumber" placeholder="请输入分类编码" maxlength="19" show-word-limit @blur="watchInput($event, 'code')" ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
          <el-form-item label="税率" prop="taxRate">
            <el-select size="small" v-model="rateForm.taxRate" placeholder="请选择税率" clearable >
          <el-option v-for="item in status" :key="item.value" :label="item.name" :value="item.value">{{item.name}}</el-option>
        </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
          <el-form-item label="简称" prop="abbreviation">
              <el-input size="small" v-model.trim="rateForm.abbreviation" placeholder="请输入简称" maxlength="30" show-word-limit ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
          <el-form-item label="简码">
              <el-input size="small" v-model.trim="rateForm.shortNumber" placeholder="请输入简码" maxlength="30" show-word-limit ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
          <el-form-item label="说明" prop="stated">
              <el-input size="small" type="textarea" v-model.trim="rateForm.stated" placeholder="请输入说明" :rows="6" maxlength="200" show-word-limit ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
          <el-form-item label="关键字">
              <el-input size="small" type="textarea" v-model.trim="rateForm.keywords" placeholder="请输入关键字" maxlength="200" show-word-limit ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer" v-if="!isLookMode">
      <el-button @click="cancelModel()">取 消</el-button>
      <el-button type="primary" :loading="submitLoading" @click="closeModel('rateForm')">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import Setting from '@/settings';
import { AddFincialData, EditFincialData } from '@/views/financial-management/services/index'
export default {
  props: {
    visible: {
      type: Boolean,
      default: false
    },
     title: {
       type: String,
       default: ''
     },
     data: {
       type: Object,
       default: {}
     },
     isLookMode: {
       type: Boolean,
       default: false
     }
    },
  data() {
    return {
      tableHeaderStyle: Setting.tableHeaderStyle,
      pageData: [],
      loading: false,
      multipleSelection: [],
      search: '',
      submitLoading: false,
      rateForm: {
        title: '',
        taxNumber: '',
        taxRate: '',
        abbreviation: '',
        shortNumber: '',
        stated: '',
        keywords: '',
        status: 0
      },
      status: [
              {
                  value: 0.13,
                  name: '13%'
              },
              {
                  value: 0.06,
                  name: '6%'
              },
              {
                  value: 0.09,
                  name: '9%'
              }
          ],
      rules: {
          title: [
            { required: true, message: '请输入分类名称',trigger: 'blur'},
          ],
          taxNumber: [
            { required: true, message: '请输入分类编码',trigger: 'blur'},
            { min: 0, max: 19, message: '不符合常规长度是否修改', trigger: 'blur' }
          ],
          taxRate: [
            { required: true, message: '请选择税率' ,trigger: 'change'}
          ],
          abbreviation: [
            { required: true, message: '请输入简称',trigger: 'blur'  }
          ],
          stated: [
            { required: true, message: '请输入说明',trigger: 'blur'  }
          ],
        }
    }
  },
  watch: {
    visible: {
      immediate: true,
      handler(newValue) {
        if (!newValue) return;
        this.getPageDataList();
      }
    }
  },
  methods: {
      watchInput(event, key) {
    },
    closeModel(formName) {
      if(this.rateForm.taxNumber && this.rateForm.taxNumber.length<19) {
      this.$confirm('分类编码与常规位数位数不对是否继续提交?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        beforeClose: (action, instance, done) => {
          if (action === 'confirm') {
            instance.confirmButtonLoading = true;
      this.$refs[formName].validate((valid) => {
        if (valid) {
      this.submitLoading = true;
      const queryData = {
      title: this.rateForm.title,
      taxNumber: this.rateForm.taxNumber,
      abbreviation: this.rateForm.abbreviation,
      stated: this.rateForm.stated,
      keywords: this.rateForm.keywords,
      taxRate: this.rateForm.taxRate
      };
      if (!this.data.id) {
        AddFincialData(queryData)
        .finally(() => this.submitLoading = false)
        .then(data => {
          instance.confirmButtonLoading = false;
          done()
          if (data.code == 200) {
            this.$message.success('新增成功')
            this.$refs[formName].resetFields();
            this.$emit('update:visible', false)
            this.$emit('update')
          } else {
            this.$message.success('新增失败')
          }
        })
      } else if (this.rateForm.taxNumber && this.rateForm.taxNumber.length>18){
        EditFincialData({ id: this.data.id, ...queryData })
        .finally(() => this.submitLoading = false)
        .then(res => {
          instance.confirmButtonLoading = false;
          done()
          if (res.code === 200) {
            this.$message.success('编辑成功')
            this.$refs[formName].resetFields();
            this.$emit('update:visible', false)
            this.$emit('update')
          } else {
            this.$message.error('编辑失败')
          }
        })
      }
        }
        })
          }else {
            done();
          }
        }
      })
      }else {
         this.$refs[formName].validate((valid) => {
        if (valid) {
      this.submitLoading = true;
      const queryData = {
      title: this.rateForm.title,
      taxNumber: this.rateForm.taxNumber,
      abbreviation: this.rateForm.abbreviation,
      stated: this.rateForm.stated,
      keywords: this.rateForm.keywords,
      taxRate: this.rateForm.taxRate
      };
      if (!this.data.id) {
        AddFincialData(queryData)
        .finally(() => this.submitLoading = false)
        .then(data => {
          if (data.code == 200) {
            this.$message.success('新增成功')
            this.$refs[formName].resetFields();
            this.$emit('update:visible', false)
            this.$emit('update')
          } else {
            this.$message.success('新增失败')
          }
        })
      } else {
        EditFincialData({ id: this.data.id, ...queryData })
        .finally(() => this.submitLoading = false)
        .then(res => {
          if (res.code === 200) {
            this.$message.success('编辑成功')
            this.$refs[formName].resetFields();
            this.$emit('update:visible', false)
            this.$emit('update')
          } else {
            this.$message.error('编辑失败')
          }
        })
      }
        }
        })
      }
    },
    cancelModel() {
      // this.clearForm()
      this.$refs['rateForm'].resetFields();
      this.$emit('update:visible', false)
    },
    handleSelectionChange(selectlist) {
      this.multipleSelection = selectlist;
    },
    getPageDataList() {
      this.loading = true;
      this.rateForm.title = this.data.title;
      this.rateForm.taxNumber = this.data.taxNumber;
      this.rateForm.abbreviation = this.data.abbreviation;
      this.rateForm.stated = this.data.stated;
      this.rateForm.keywords = this.data.keywords;
      this.rateForm.taxRate = this.data.taxRate;
      this.rateForm.status = this.data.status
    },
     //清空表单信息
    clearForm() {
      this.rateForm.title = ''
      this.rateForm.taxNumber = ''
      this.rateForm.taxRate = ''
      this.rateForm.abbreviation = '',
      this.rateForm.explain = '',
      this.rateForm.keywords = '',
      this.rateForm.status = 0
    },
  }
}
</script>
